<template>
  <div>
    <div class="Header">
        <div class="title"><i class="el-icon-own" @click="goHome"></i>高校计算机实验室管理系统 &nbsp;
            <span style="font-size: 12px;">
                &copy;ZORA &nbsp;2023
            </span>
        </div>
        <div class="userMessage" v-show="userObj.account!=='未登录'">
            <ul>
                <li class="dropdown user-dropdown">
                    <a href="javascript:void(0)" style="text-decoration: none; color: white;" class="dropdown-toggle" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-user">
                        </span> &nbsp;&nbsp;&nbsp;
						<span>
							{{userObj.account}}
						</span>
                        <span class="caret">
                        </span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="" data-toggle="modal" data-target="#myInformation" onclick="return false">
                                <span class="glyphicon glyphicon-file">
                                    
                                </span> 
                                我的资料
                            </a>
                        </li>
                        <li>
                            <a href="" data-toggle="modal" data-target="#editPwdModal" onclick="return false">
                                <span class="glyphicon glyphicon-edit">
                                    
                                </span> 
                                修改密码
                            </a>
                        </li>
                        <li>
                            <a href="" data-toggle="modal" data-target="#exitModal" onclick="return false">
                                <span class="glyphicon glyphicon-off">
                                </span> 
                                退出
                            </a>
                        </li>
						<li>
                            <a href="" data-toggle="modal" data-target="#safeExitModal" onclick="return false">
                                <span class="glyphicon glyphicon-off">
                                </span> 
                                取消免登录
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div style="position: absolute;top: 15px;right: 20px;width: 40px;font-size: 14px;">
            <span style="color: white;">{{userCall(userObj.role)}}</span>
        </div>
    </div>
    <!--模态窗口-->
		<!-- 我的资料 -->
		<div class="modal fade" id="myInformation" role="dialog">
			<div class="modal-dialog" role="document" style="width: 30%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title">我的资料</h4>
					</div>
					<div class="modal-body">
						<br>
						<a href="" data-toggle="modal" data-target="#updateUserMessageModal" @click="fillMessage">
							<span class="glyphicon glyphicon-pencil">
							</span> 
							更新用户信息
						</a>
						<br><br>
						<div style="position: relative; padding: 10%">
							账号：<b>{{userObj.account}}</b><br><br>
							邮箱：<b>{{userObj.email}}</b><br><br>
							身份标识码：<b>{{userObj.identity}}</b><br><br>
							权限身份：<b>{{userRole(userObj.role)}}</b><br><br>
							账号状态：<b>{{userObj.state==='1'?'正常':'异常'}}</b><br><br>
							电话号：<b>{{userObj.telephone}}</b><br><br>
							账号创建时间：<b>{{userObj.createtime}}</b>
						</div>
						<br>
						<br>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 修改密码的模态窗口 -->
		<div class="modal fade" id="editPwdModal" role="dialog">
			<div class="modal-dialog" role="document" style="width: 70%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title">修改密码</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" role="form" ref="updatePasswordForm">
							<div class="form-group">
								<label for="oldPwd" class="col-sm-2 control-label">原密码</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control" id="oldPwd" style="width: 200%;" v-model="passwordParam.oldPassword">
								</div>
							</div>
							
							<div class="form-group">
								<label for="newPwd" class="col-sm-2 control-label">新密码</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control" id="newPwd" style="width: 200%;" v-model="passwordParam.newPassword">
								</div>
							</div>
							
							<div class="form-group">
								<label for="confirmPwd" class="col-sm-2 control-label">确认密码</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control" id="confirmPwd" style="width: 200%;" v-model="confirmPassword" @blur="validation">
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" data-dismiss="modal" id="updateSubmit" @click="updatePassword">更新</button>
					</div>
				</div>
			</div>
		</div>
	
		<!-- 退出系统的模态窗口 -->
		<div class="modal fade" id="exitModal" role="dialog">
            <div class="modal-dialog" role="document" style="width: 30%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title">离开</h4>
					</div>
					<div class="modal-body">
						<p>您确定要退出系统吗？</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" data-dismiss="modal" @click="safeLeave">确定</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 安全退出系统的模态窗口 -->
		<div class="modal fade" id="safeExitModal" role="dialog">
            <div class="modal-dialog" role="document" style="width: 30%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title">离开</h4>
					</div>
					<div class="modal-body">
						<p>您确定要取消免登录并退出吗？</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" data-dismiss="modal" @click="clearCookieToken">确定</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 修改个人信息模态窗口 -->
		<div class="modal fade" id="updateUserMessageModal" role="dialog">
			<div class="modal-dialog" role="document" style="width: 70%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title">修改个人信息</h4>
					</div>
					<div class="modal-body">
						<div style="position: relative; left: 25%;width:50%;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);text-align: center;">
							账号：<b>{{userObj.account}}</b><br><br>
							权限身份：<b>{{userRole(userObj.role)}}</b><br><br>
							账号状态：<b>{{userObj.state==='1'?'正常':'异常'}}</b><br><br>
						</div>
						<br>
						<br>
						<br>
						<form class="form-horizontal" role="form" ref="updatePasswordForm" style="position:relative;left:10%;width: 80%;">
							<div class="form-group">
								<label for="oldPwd" class="col-sm-2 control-label">邮箱</label>
								<div class="col-sm-10" style="width:70%">
									<input type="text" class="form-control" style="width: 100%;" v-model="userMessage.email">
								</div>
							</div>
							
							<div class="form-group">
								<label for="newPwd" class="col-sm-2 control-label">身份标识码</label>
								<div class="col-sm-10" style="width: 70%">
									<input type="text" class="form-control" style="width: 100%;" v-model="userMessage.identity">
								</div>
							</div>
							
							<div class="form-group">
								<label for="confirmPwd" class="col-sm-2 control-label">电话号</label>
								<div class="col-sm-10" style="width: 70%">
									<input type="text" class="form-control" style="width: 100%;" v-model="userMessage.telephone">
								</div>
							</div>

							<div class="form-group">
								<label for="confirmPwd" class="col-sm-2 control-label">安全密码</label>
								<div class="col-sm-10" style="width: 70%">
									<input type="text" class="form-control" style="width: 100%;" v-model="userMessage.password">
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" data-dismiss="modal" id="updateSubmit" @click="updateUserMessageByAccount">更新用户信息</button>
					</div>
				</div>
			</div>
		</div>
  </div>
</template>

<script>
import Cookies from 'js-cookie';
import $ from 'jquery';
import AES from '@/util/crypto';
import { mapState} from 'vuex';
export default {
    name:'Header',
	data(){
		return{
			confirmPassword:'',
			passwordParam:{
				oldPassword:'',
				newPassword:'',
			},
			userMessage:{
				password:'',
				email:'',
				identity:'',
				telephone:''
			}
		}
	},
	computed:{
		...mapState('login',['userObj']),
		...mapState('header',['isPasswordAlert'])
	},
	methods:{
		goHome(){
			this.$router.replace({
				name:'Home'
			})
		},
		userRole(role){
			let result="";
			if(role==='admin'){
				result='管理员'
			}
			if(role==='users'){
				result='用户'
			}
			if(role==='Root'){
				result='超管'
			}
            return result;
		},
		userCall(role){
            let result='欢迎';
            if(role==='admin'){
				result='老师'
			}
			if(role==='users'){
				result='同学'
			}
			if(role==='Root'){
				result='超管'
			}
            return result;
        },
		validation(){
			//当确认密码输入框失去焦点时，触发该方法，如果确认密码失效，那么将会使更新按钮失效
			if(this.passwordParam.newPassword!==this.confirmPassword){
				$("#updateSubmit").attr("disabled",true)
			}else{
				$("#updateSubmit").attr("disabled",false)
			}
		},
		updatePassword(){
			let obj=Object.assign({account:JSON.parse(AES.decrypt(sessionStorage.getItem("userObj"))).account},this.passwordParam)
			this.$store.dispatch("header/updatePasswordByAccount",obj)
			//提交后重置表单
			this.$refs.updatePasswordForm.reset()
		},
		safeLeave(){
			//清空会话域
			sessionStorage.clear();
			//清空cookie
			//清空用户信息
			let origionObj={
				account:'未登录',
				telephone:'',
				identity:'',
				createtime:'',
				email:'',
				state:'',
				role:'None'
			}
			this.$store.state.login.userObj=origionObj;
			this.$router.push({
				name:'Login'
			})
		},
		clearCookieToken(){
			if(Cookies.get("usernameToken")!==undefined){
				Cookies.remove("usernameToken");
			}
			if(Cookies.get("passwordToken")!==undefined){
				Cookies.remove("passwordToken");
			}

			this.safeLeave();
		},
		fillMessage(){
			this.userMessage.email=this.userObj.email;
			this.userMessage.identity=this.userObj.identity;
			this.userMessage.telephone=this.userObj.telephone;
		},
		updateUserMessageByAccount(){
			if(this.userMessage.email===''||this.userMessage.identity===''||this.userMessage.telephone===''||this.userMessage.password===''){
				this.$message({
					message:"请检查输入数据是否有空缺！修改失败",
					type:'error'
				});
				return;
			}
			var email=/^[1-9][0-9]{4,10}@qq.com/;
			if(!email.test(this.userMessage.email)){
            this.$message({
                message:'您的邮箱格式存在问题！修改失败',
                type:'error'
            })
            return;
        }
			let obj={
				'id':this.userObj.id,
				'account':this.userObj.account
			}
			let objParam=Object.assign(obj,this.userMessage);
			this.$store.dispatch("header/updateUserMessageByAccount",objParam);
		}
	},
	watch:{
		'isPasswordAlert':{
			immediate:true,
			handler(){
				this.$nextTick((()=>{
                    let isPasswordAlert=this.$store.state.header.isPasswordAlert;
                    if(isPasswordAlert==='请求成功'){
                        alert("密码已更新，请重新登录！");
						sessionStorage.removeItem("userObj");
						// this.$store.state.login.isLogin='';
						this.$router.replace({
							name:'Login'
						})
                    }
                }))
			}
		}
	}
}
</script>

<style scoped lang="css">
/*顶部*/
    .Header{
		position: inherit;
        height: 50px; 
        /* background-color: #3278B3;   */
        background: linear-gradient(-45deg, #071275, #7156c8,#e27c65,#d7d897);
        width: 100%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
    .title{
        position: inherit; 
        top: 5px; 
        left: 10px; 
        font-size: 30px; 
        font-weight: 400; 
        color: white; 
        font-family: 'times new roman'
    }
    .userMessage{
        position: absolute; 
        top: 15px; 
        right: 100px;
    }
	.el-icon-own{
		background: url(../../assets/imgs/favicon.png) center no-repeat;
		background-size: contain;
		margin-top: 5px;
	}
	.el-icon-own:before{
		content: "own";                                    /*before属性中的content文本是用来占位的,必须有*/
        font-size: 40px;                                   /*可以设置字体大小来确定图标大小*/
        visibility: hidden;
	}
</style>